<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- layout栅格 设置多少行多少列 span是宽度 gutter是间隙 -->
      <el-row :gutter="20">

        <el-col :span="12">
          <!-- 搜索与添加区域 -->
          <el-input class="t" placeholder="请输入用户名"  v-model="queryUser.thing" clearable @clear="getUserList"> <!-- 将value和query双向绑定 点击搜索就发送请求 请求相应的数据 放到userlist里 如果默认不搜索就是请求所有的数据 同时加上clearble属性 使得点击可以清除输入内容 于是触发clear事件 监听事件让下面显示所有数据 -->
            <el-button slot="append" icon="el-icon-search" @click="findUserByInfo"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <!-- 搜索与添加区域 -->
        </el-col>
<!--        <el-col :span="4">-->
<!--          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button> &lt;!&ndash; 点击这个按钮 对话框显示出来 &ndash;&gt;-->
<!--        </el-col>-->

      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="userlist" border stripe fit> <!-- 跟menu一样 把要展示的数据存储到table自带的属性data里面 下面再用prop取对应的数据 和v-model双向绑定 -->

        <el-table-column type="index" ></el-table-column> <!-- column索引列 只要加上type="index" -->
        <el-table-column label="头像" width="80px">
        <template slot-scope="scope"> <!-- 作用域插槽 新版是v-slot="scope" scope.row代表这一行的所有数据 这是从上面userlist里拿出来的 -->
          <el-avatar :size="50" :src="scope.row.headPortrait" class="headPortrait" @click="showUserInfo(scope.row.userId,scope.row.headPortrait,scope.row.nickname,scope.row.signature)"></el-avatar>
        </template>
        </el-table-column>
        <el-table-column label="昵称"  >
          <template slot-scope="scope"> <!-- 作用域插槽 新版是v-slot="scope" scope.row代表这一行的所有数据 这是从上面userlist里拿出来的 -->
            <span class="headPortrait"  @click="showUserInfo(scope.row.userId,scope.row.headPortrait,scope.row.nickname,scope.row.signature,scope.row.invitationNumber)">{{scope.row.nickname}}</span>
          </template>
        </el-table-column>
        <el-table-column label="个性签名" prop="signature"></el-table-column>
        <el-table-column label="城市" prop="city"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="150px"></el-table-column>
        <el-table-column label="帖子数量" prop="invitationNumber"></el-table-column>
        <el-table-column label="禁言时长" prop="banTime"></el-table-column>
        <el-table-column label="操作" width="70px">
          <template slot-scope="scope"> <!-- 作用域插槽 -->
            <el-tooltip effect="dark" content="删除用户" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.userId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="schoolUser.page" :page-sizes="[1, 2, 5, 10]" :page-size="schoolUser.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="usserTotal"> <!-- layout表示显示哪些东西 -->
      </el-pagination>

    </el-card>

    <!-- 添加用户的对话框 根据addDialogVisible显示或隐藏 -->
    <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed" :append-to-body="true">
      <!-- 内容主体区域 -->
      <el-form :model="schoolUser"  ref="addFormRef" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="schoolUser.nickname" ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="schoolUser.gender" ></el-input>
        </el-form-item>
        <el-form-item label="微信标识ID">
          <el-input v-model="schoolUser.openId" ></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="schoolUser.city" ></el-input>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input v-model="schoolUser.signature" ></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-input v-model="schoolUser.headPortrait" ></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看用户的对话框 -->
    <el-dialog   :visible.sync="editDialogVisible"  @close="editDialogClosed" width="800px" :append-to-body="true" :estroy-on-close="true">
        <div class="userInfoHeader">
          <el-avatar class="userIcon" :size="70" :src="this.showUserInfoDetail.headPortrait"></el-avatar>
          <div class="nickname_signature">
          <div class="userNickname"> {{ this.showUserInfoDetail.nickname }}</div>
            <div class="userSignature">个人简介：{{ this.showUserInfoDetail.signature }}</div>
            <i class="iconfont icon-tiezi"> {{this.showUserInfoDetail.invitationNumber}}</i>
          </div>
          <div class="operation">
            <div class="banAccount" >
            <el-button  plain @click="banCountDialog = true">封号</el-button>
            </div >
            <div class="banTalk">
            <el-button plain @click="banTalkDialog = true">禁言</el-button>
            </div>
          </div>
        </div>
      <el-dialog
        width="30%"
        title="禁言该用户"
        :visible.sync="banTalkDialog"
        append-to-body>
        <span style="margin-left: 40px">请选择禁言时长:  </span>
        <el-date-picker
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        v-model="banTalkTime">
        </el-date-picker>
        <span slot="footer" class="dialog-footer">
    <el-button @click="banTalkDialog = false">取 消</el-button>
    <el-button type="primary" @click="banTalk()">确 定</el-button>
       </span>
      </el-dialog>
      <el-dialog
        width="30%"
        title="封禁该用户"
        :visible.sync="banCountDialog"
        append-to-body>
        <span style="margin-left: 40px">请选择封禁截止日期:  </span>
        <el-date-picker
          type="date"
          placeholder="选择日期时间"
        v-model="banCuntTime">
        </el-date-picker>
        <span slot="footer" class="dialog-footer">
    <el-button @click="banCountDialog = false">取 消</el-button>
    <el-button type="primary" @click="banCountDialog = false">确 定</el-button>
       </span>
      </el-dialog>
        <div class="userInfoMain">
          <el-tabs class="invitation" type="border-card">
            <el-tab-pane label="帖子">
              <div class="content" v-if="this.invitationList.length>0">
                <div class="invitationContent" v-for="(item,index)  in invitationList" v-bind:key="index">
                  <div class="Col_left" @click="getInvitationInfoDetail(item.inviId)">
                    <span class="threadlist_rep_num center_text" title="回复" >{{ item.commentNum }}</span>
                  </div>
                  <div class="Col_mid">
                    <div class="Col_mid_top">
        <span class="Col_mid_top_title">

          <span v-for="(item2,index)  in item.topics" v-bind:key="index">
            <span class="invitationTopic" @click="showTopicInfo(item2)">#{{item2.topicName}}# </span>
          </span>
         <span class="inviTitle" @click="getInvitationInfoDetail(item)">
           {{item.inviTitle}}
         </span>
        </span>
                    </div>
                    <div class="Col_mid_under">
                      <div class="Col_mid_under_invitationContent" @click="getInvitationInfoDetail(item)">
                        {{item.inviContent}}
                      </div>
                      <!--        <div class="Col_mid_under_pic"></div>-->
                      <div class="Col_mid_under_mid">
                        <div class="Col_mid_under_right_zan">
                          <i class="iconfont icon-dianzan">  {{item.agreeNum}}</i><br/>
                          <i class="iconfont icon-liulan">  {{item.browseNum}}</i>
                        </div>
                      </div>
                      <div class="Col_mid_under_right">
                        <span class="Col_mid_under_right_time">{{item.createTime}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="Col_right">
                    <el-tooltip effect="dark" class="deleteInvitation" content="删除帖子" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
                      <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTopic(item.inviId)"></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="tipsNoInvitation" v-else>这个人好懒。什么也没留下</div>
              <div class="page">
<!--              <el-pagination-->
<!--                @current-change="handleUserInvitationPageCurrentChange"-->
<!--                :current-page="userInviPage.page"-->
<!--                :page-size="5"-->
<!--                layout="total, prev, pager, next"-->
<!--                :total="userInvitationTotal">-->
<!--              </el-pagination>-->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleUserInvitationPageCurrentChange"
                  :current-page.sync="Invitation.page"
                  :page-size="5"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
              </div>
            </el-tab-pane>
<!--            话题的展示在此-->
<!--            <el-tab-pane label="话题">-->
<!--              <div class="content"></div>-->
<!--              <div class="page">-->
<!--&lt;!&ndash;                <el-pagination&ndash;&gt;-->
<!--&lt;!&ndash;                  @size-change="handleSizeChange"&ndash;&gt;-->
<!--&lt;!&ndash;                  @current-change="handleCurrentChange"&ndash;&gt;-->
<!--&lt;!&ndash;                  :current-page.sync="currentPage1"&ndash;&gt;-->
<!--&lt;!&ndash;                  :page-size="100"&ndash;&gt;-->
<!--&lt;!&ndash;                  layout="total, prev, pager, next"&ndash;&gt;-->
<!--&lt;!&ndash;                  :total="1000">&ndash;&gt;-->
<!--&lt;!&ndash;                </el-pagination>&ndash;&gt;-->
<!--                <el-pagination-->
<!--                  @size-change="handleSizeChange"-->
<!--                  @current-change="handleCurrentChange"-->
<!--                  :current-page.sync="schoolUser.page"-->
<!--                  :page-size="100"-->
<!--                  layout="total, prev, pager, next"-->
<!--                  :total="1000">-->
<!--                </el-pagination>-->
<!--              </div>-->
<!--            </el-tab-pane>-->
          </el-tabs>
        </div>
      <!-- 查看帖子详情对话框 -->
      <el-dialog   :visible.sync="disabled" @close="handClose()"  width="800px" :append-to-body="true" :estroy-on-close="true">
        <div class="userInfoHeader">
          <el-avatar class="userIcon" :size="50" :src="topic.topicIcon"></el-avatar>
          <div class="nickname_signature">
            <div class="userNickname"> #{{ topic.topicName}}#</div>
            <div class="userSignature" style="margin-bottom: 10px">话题描述：{{ topic.topicDescr }}</div>
            话题发帖数<i class="iconfont icon-tiezi"> {{topic.inviNum}}</i>
          </div>
          <div class="time">
            <div class="createTime">话题创建时间：{{ topic.createTime }}</div>
            <div class="updateTime">最近更新时间：{{ topic.updateTime }}</div>
          </div>
        </div>
        <div class="userInfoMain">
          <el-tabs class="invitation2" type="border-card">
            <el-tab-pane label="帖子">
              <div class="content" v-if="this.invitationListTopic.length>0">
                <div class="invitationContent" v-for="(item,index)  in invitationListTopic" v-bind:key="index">
                  <div class="Col_left" @click="getInvitationInfoDetail(item)">
                    <span class="threadlist_rep_num center_text" title="回复" >{{ item.commentNum }}</span>
                  </div>
                  <div class="Col_mid">
                    <div class="Col_mid_top">
        <span class="Col_mid_top_title">

<!--          <span v-for="(item2,index)  in item.topics" v-bind:key="index">-->
          <!--            <span class="invitationTopic">#{{item2.topicName}}# </span>-->
          <!--          </span>-->
         <span class="inviTitle" @click="getInvitationInfoDetail(item)">
           {{item.inviTitle}}
         </span>
        </span>
                    </div>
                    <div class="Col_mid_under">
                      <div class="Col_mid_under_invitationContent" @click="getInvitationInfoDetail(item)">
                        {{item.inviContent}}
                      </div>
                      <!--        <div class="Col_mid_under_pic"></div>-->
                      <div class="Col_mid_under_mid">
                        <div class="Col_mid_under_right_zan">
                          <i class="iconfont icon-dianzan">  {{item.agreeNum}}</i><br/>
                          <i class="iconfont icon-liulan">  {{item.browseNum}}</i>
                        </div>
                      </div>
                      <div class="Col_mid_under_right">
                        <span class="Col_mid_under_right_time">{{item.createTime}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="Col_right">
                    <el-tooltip effect="dark" class="deleteInvitation" content="删除帖子" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
                      <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTopic2(item.inviId)"></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="tipsNoInvitation" v-else>该话题暂无帖子讨论</div>
              <div class="page">
                <!--              <el-pagination-->
                <!--                @current-change="handleUserInvitationPageCurrentChange"-->
                <!--                :current-page="userInviPage.page"-->
                <!--                :page-size="5"-->
                <!--                layout="total, prev, pager, next"-->
                <!--                :total="userInvitationTotal">-->
                <!--              </el-pagination>-->
                <el-pagination
                  @current-change="handleUserInvitationPageCurrentChange2"
                  :current-page.sync="things2.page"
                  :page-size="4"
                  layout="total, prev, pager, next"
                  :total="invitationSize">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取用户列表的参数对象 原数据是一整条 根据页数和条数返回相应的数据 如每页显示3条 第2页 就会把第4 5 6个数据返回 拿到后就把这3个渲染出来 total控制着页码组件的数据显示
      queryInfo: {
        // 搜索关键字 和搜索框的value进行了双向绑定
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 5
      },
      userlist: [], /* 返回的数据存储到这里 */
      total: 0,
      usserTotal: 0,
      // 禁言对话框
      banTalkDialog: false,
      // 封号对话框
      banCountDialog: false,
      // 控制添加用户对话框的显示与隐藏
      addDialogVisible: false,
      // 控制修改用户对话框的显示与隐藏
      editDialogVisibleTopic: false,
      editDialogVisible: false,
      schoolUser: {
        userId: '',
        banTime: -1,
        ban_day: -1,
        birthday: '',
        city: '',
        gender: -1,
        headPortrait: '',
        invitationNumber: -1,
        nickname: '',
        page: 1,
        pageSize: 5,
        signature: '',
        sortOrder: ''
      },
      queryUser: {
        page: 1,
        pageSize: 5,
        sortOrder: '',
        thing: ''
      },
      invitationList: [],
      Invitation: {
        agreeNum: -1,
        browseNum: -1,
        buildId: -1,
        commentNum: -1,
        inviContent: '',
        inviTitle: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicList: '',
        userId: -1
      },
      userIdFindInvitation: -1,
      showUserInfoDetail: {
        userId: -1,
        nickname: '',
        headPortrait: '',
        signature: '',
        invitationNumber: 0
      },
      // 异步搜索数据内容
      isshow: false,
      selectUsers: [],
      query: '',
      banCuntTime: '',
      banTalkTime: '',
      things2: {
        page: 1,
        pageSize: 4,
        sortOrder: 'topic_list',
        thing: '1'
      },
      invitationListTopic: [],
      invitationSize: 0,
      topic: {
        createTime: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicDescr: '',
        topicIcon: '',
        topicId: -1,
        topicName: '',
        updateTime: '',
        version: -1
      },
      disabled: false
    }
  },
  mounted () {
    this.changeBread()
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.post('schoolUser/selectUserByAccurate', this.schoolUser)
      if (res.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      this.userlist = res.data.list
      this.usserTotal = res.data.total
    },
    // // 监听 下拉页码 改变的事件 newsize为选择的条数 选择了几条就把这个作为参数传给数据请求中重新请求
    // handleUserInvitationPageSizeChange (newSize) {
    //   this.userInviPage.pageSize = newSize
    //   this.getUserInvitation(this.userIdFindInvitation)
    // },
    handleSizeChange (newSize) {
      this.schoolUser.pageSize = newSize
      this.getUserList()
    },
    // 监听 页码值 改变的事件 newPage为选择的页码值 选择了第几页就把这个页码作为参数传给数据请求中重新请求
    handleCurrentChange (newPage) {
      this.schoolUser.page = newPage
      this.getUserList()
    },
    handleUserInvitationPageCurrentChange (newPage) {
      this.Invitation.page = newPage
      this.getUserInvitation(this.userIdFindInvitation)
    },
    // 监听添加用户对话框的关闭事件 表单重置 状态保存 这样每次打开都是上次关闭的状态
    addDialogClosed () {
      this.$refs.addFormRef.resetFields() /* resetFields是form表单的一个方法 */
    },
    // 点击确定，添加新用户 进行预校验
    addUser () {
      this.$refs.addFormRef.validate(async valid => { /* 校验通过 valid为true 否则为false */
        const { data: res } = await this.$http.post('schoolUser/insertUser', this.schoolUser)

        // 请求的返回结果
        if (res.meta.status !== 201) {
          this.$message.error('添加用户失败！')
        }
        this.$message.success('添加用户成功！')
        // 隐藏添加用户的对话框
        this.addDialogVisible = false
        // 重新获取用户列表数据（因为有绑定了 所以会自动渲染出来）
        this.getUserList()
      })
    },
    // // 监听修改用户对话框的关闭事件 保存验证状态 下次打开时依然是那些数据
    editDialogClosed () {
      this.total = 0
      // this.$refs.editFormRef.resetFields()
    },
    // 根据Id删除对应的用户信息
    async removeUserById (id) {
      // 弹框询问用户是否删除数据（参见element）
      const confirmResult = await this.$confirm(/* 先给vue挂载了$confirm函数 里面的参数代表弹框显示的内容样式 函数的返回值是promise 所以可以用asyc和await来优化 这样返回的值即confirmResult就是一个字符串了（之前的是一个数据）如果确定就是confirm 取消就是cancle 由catch捕获 */
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err) /* 点取消则由catch捕获异常 return err的简写 把err返回 */

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      // 确认删除 先发送请求 判断删除是否成功 不用传id参数
      const { data: res } = await this.$http.get('schoolUser/deleteUser/' + id)

      if (res.status !== 200) {
        return this.$message.error('删除用户失败！')
      }

      this.$message.success('删除用户成功！')
      this.getUserList()
    },
    // 查找用户通过用户信息
    async findUserByInfo () {
      this.queryUser.page = this.schoolUser.page
      this.queryUser.pageSize = this.schoolUser.pageSize
      const { data: res } = await this.$http.post('schoolUser/selectUserByVague', this.queryUser)
      if (res.status !== 200) {
        return this.$message.error('未查询到任何用户！')
      }
      this.userlist = res.data.list
      this.total = res.data.total
    },
    async getUserInvitation (userId) {
      // this.invitationList = []
      // this.total = 0
      this.Invitation.userId = userId
      this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('invitation/selectInviteByAccurate/', this.Invitation)
      if (res.status !== 500) {
        this.invitationList = res.data.list
        this.total = res.data.total
      } else {
        this.invitationList = []
      }
    },
    // 查看用户详细信息及数据
    async showUserInfo (userId, avatarUrl, nickName, signature, invitationNumber) {
      this.showUserInfoDetail.nickname = nickName
      this.showUserInfoDetail.headPortrait = avatarUrl
      this.showUserInfoDetail.signature = signature
      this.showUserInfoDetail.userId = userId
      this.showUserInfoDetail.invitationNumber = invitationNumber
      this.editDialogVisible = true
      this.userIdFindInvitation = userId
      await this.getUserInvitation(userId)
      // const { data: res } = await this.$http.post(`invitation/selectInviteByAccurate/${this.queryInfo.pagenum}/${this.queryInfo.pagesize}`, this.Invitation).then(
      //   await this.getUserInvitation(userId)
      // )
    },
    // 用于改变面包屑导航栏
    changeBread () {
      document.getElementById('first').innerHTML = '用户管理'
      document.getElementById('second').innerHTML = '用户列表'
      document.getElementById('separate_1').innerHTML = '/'
      document.getElementById('separate_2').innerHTML = '/'
    },
    selectInput (event) {
      this.query = event.target.innerHTML
      this.isshow = false
    },
    banCountUser () {
    },
    async banTalk () {
      this.schoolUser.banTime = this.banTalkTime
      this.schoolUser.userId = this.showUserInfoDetail.userId
      this.banTalkDialog = false
      await this.$http.post('schoolUser/updateUser', this.schoolUser)
    },
    async deleteTopic (id) {
      const { data: res } = await this.$http.get(`invitation/deleteInvite/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      await this.getUserInvitation(this.showUserInfoDetail.userId)
      this.$message.success('删除成功！')
    },
    getInvitationInfoDetail (invitation) {
      const id = invitation.inviId
      this.$router.push({
        path: '/invitations/content/',
        component: 'invitationContent',
        query: {
          inviId: id
        }
      })
    },
    async getTopicInvitation (topicId) {
      this.invitationSize = []
      this.things2.thing = topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      if (res.data.list !== null) {
        this.invitationList = res.data.list
        this.invitationSize = res.data.total
      }
    },
    showTopicInfo (item) {
      console.log(item)
      this.topic = item
      this.disabled = true
      this.getTopicInvitation2(item.topicId)
    },
    async deleteTopic2 (id) {
      const { data: res } = await this.$http.get(`invitation/deleteInvite/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功！')
      this.getTopicInvitation2()
    },
    handleUserInvitationPageCurrentChange2 (newPage) {
      this.things2.page = newPage
      this.getTopicInvitation2()
    },
    async getTopicInvitation2 (topicId) {
      // this.dataInvitation = []
      // alert(1)
      this.things2.thing = this.topic.topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      console.log(res)
      this.invitationListTopic = res.data.list
      this.invitationSize = res.data.total
    },
    handClose () {
      this.disabled = false
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/topicDialog.css";
.headPortrait {
  cursor: pointer;
}
.userInfoHeader{
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}
.userInfoMain{
  width: 100%;
  height: 500px;
}
.userNickname{
  font-size: 25px;
}
.userIcon{
  float: left;
  margin-right: 20px;
  margin-top: 15px;
  margin-left: 20px;
}
.nickname_signature {
  float: left;
  margin-top: 20px;
}
.operation{
  float: right;
  width: 100px;
  height: 100px;
}
.banAccount{
 margin-top: 5px;
}
.banTalk{
  margin-top: 5px;
}
.invitation{
  height: 100%;
}
.content{
  height: 400px;
}
.invitationContent
{
  height: 80px;
  border-bottom: 1px solid #E4E6EB;
}
.invitationTitle :hover{
  cursor: pointer;
  background-color: #F1F3F4;
}
.tipsNoInvitation{
  font-size: 50px;
  margin-left: 100px;
  margin-top: 100px;
  margin-bottom: 240px;
  color: #E7EAED;
}
.threadlist_rep_num {
  display: inline-block;
  width: 50px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  background: url(//tb2.bdstatic.com/tb/img/f_reply_bg_8ec77f0.png) no-repeat;
  margin-top: 10px;
  margin-left: 18%;
}
.Col_left{
  float: left;
  width: 10%;
}
.Col_mid{
  height: auto;
  width: 70%;
  float: left;
  padding-top: 8px;
}
.Col_right{
  float: left;
  height: 100px;
  width: 20%;
}
.invitationContent{
  width: 100%;
  display: block;
  left: 20vh;
  height: 100px;
  border: 1px solid #E4E6EB;
  background-color: white;
}
.invitationContent:hover{
  background-color:#F1F3F4;
  cursor: pointer;
}
.Col_mid_top_title{
  width: 50%;
  font-size: 20px;
  color: #2D64B3;
}
.Col_mid_under_invitationContent{
  width: 50%;
  float: left;
}
.Col_mid_under_mid{
  width: 25%;
  height: 50px;
  float: left;
  color: #9E9E9E;
}
.deleteInvitation{
  margin-top: 20%;
  margin-left: 30%;
}
.Col_mid_under_right {
  width: 25%;
  height: 50px;
  float: right;
  color: #9E9E9E;
  font-size: 15px;
}
.Col_mid_under_right_time{
  font-size: 13px;
}
.invitationTopic:hover{
  text-decoration:underline;
}
.inviTitle:hover{
  text-decoration:underline;
}
.Col_mid_under_invitationContent{
  margin-top: 10px;
  white-space: nowrap;/*内容超宽后禁止换行显示*/
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/*文字超出部分以省略号显示*/
}
.sub-title li{
  margin-top: 5px;
}
.sub-title li:hover{
  cursor: pointer;
  background-color: #F5F7FA;
  color: #409CFF;
}
.time{
   margin-top: 30px;
   float: right;
   margin-right: 50px;
 }
.createTime{
  margin-bottom: 20px;
}
.userInfoHeader{
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}
.userInfoMain{
  width: 100%;
  height: 500px;
}
.userNickname{
  font-size: 25px;
}
.userIcon{
  float: left;
  margin-right: 20px;
  margin-top: 15px;
  margin-left: 20px;
}
nickname_signature1{
  margin-bottom: 10px;
  width: 50%;
}
</style>
